{% extends "admin/base.html" %}

{% block title %}系统设置{% endblock %}

{% block content %}
<div class="settings-container">
    <!-- 页面头部 -->
    <div class="settings-header">
        <h1><i class="fas fa-cog"></i> 系统设置</h1>
        <div class="settings-actions">
            <button class="btn-primary" id="btn-save-settings">
                <i class="fas fa-save"></i>
                保存设置
            </button>
        </div>
    </div>

    <!-- 设置表单 -->
    <div class="settings-form">
        <div class="form-group">
            <label for="site_title">站点标题</label>
            <input type="text" id="site_title" value="{{ settings.site_title }}">
        </div>
        
        <div class="form-group">
            <label for="site_subtitle">站点副标题</label>
            <input type="text" id="site_subtitle" value="{{ settings.site_subtitle }}">
        </div>

        <div class="form-group">
            <label for="site_description">站点描述</label>
            <textarea id="site_description" rows="3">{{ settings.site_description }}</textarea>
        </div>

        <div class="form-group">
            <label>站点 Logo</label>
            <div class="logo-uploader">
                <input type="file" id="site_logo" accept="image/*">
                <div class="hint">支持 PNG/JPG，建议尺寸 256x256</div>
            </div>
        </div>

        <div class="form-row">
            <label class="checkbox">
                <input type="checkbox" id="enable_comments" {% if settings.enable_comments %}checked{% endif %}>
                启用评论
            </label>
            <label class="checkbox">
                <input type="checkbox" id="enable_search" {% if settings.enable_search %}checked{% endif %}>
                启用站内搜索
            </label>
        </div>
    </div>
</div>

<!-- 分页样式卡片对齐（与文章/分类同风格，仅示例，无分页） -->
<div class="mt-0">
    <div class="bg-white rounded-b-lg shadow-md p-6">
        <div class="text-sm text-gray-500">提示：保存后将应用到全站。</div>
    </div>
    
</div>
{% endblock %}

{% block extra_css %}
<style>
.settings-container {
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 0;
}

.settings-header { padding: 1.5rem 2rem; border-bottom: 1px solid #e1e8ed; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.settings-header h1 { margin: 0; color: #2c3e50; font-size: 1.25rem; font-weight: 600; }
.settings-actions { display: flex; gap: 1rem; align-items: center; }

.btn-primary { background: #007bff; color: #fff; padding: 0.5rem 1rem; border: none; border-radius: 6px; font-weight: 500; font-size: 0.875rem; transition: all .3s ease; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.btn-primary:hover { background: #0056b3; color: #fff; }

.settings-form { padding: 1.5rem 2rem; background: #f8f9fa; border-bottom: 1px solid #e1e8ed; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-group label { font-size: .875rem; font-weight: 500; color: #495057; }
.form-group input, .form-group textarea { padding: .5rem; border: 1px solid #ced4da; border-radius: 6px; font-size: .875rem; }

.form-row { display: flex; gap: 2rem; align-items: center; }
.checkbox { display: flex; align-items: center; gap: .5rem; color: #495057; }

.logo-uploader input[type="file"] { display: block; }
.logo-uploader .hint { color: #6c757d; font-size: .8125rem; margin-top: .25rem; }
</style>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('btn-save-settings').addEventListener('click', function() {
    // 模拟保存：收集数据并提示
    const payload = {
        site_title: document.getElementById('site_title').value.trim(),
        site_subtitle: document.getElementById('site_subtitle').value.trim(),
        site_description: document.getElementById('site_description').value.trim(),
        enable_comments: document.getElementById('enable_comments').checked,
        enable_search: document.getElementById('enable_search').checked
    };
    Utils.notification.show('设置已保存（示例）', 'success');
});
</script>
{% endblock %}


